<template>
    <div class="desktop">
      <div
        v-for="(icon, index) in icons"
        :key="icon.id"
        class="icon"
        :class="{ merged: icon.merged }"
        draggable="true"
        @dragstart="dragStart(index)"
        @dragover.prevent
        @drop="dragDrop(index)"
        @dblclick="deleteIcon(index)"
      >
        {{ icon.label }}
      </div>
    </div>
  </template>
  
  <script>
  import { reactive, toRefs } from 'vue';
  
  export default {
    setup() {
      const state = reactive({
        icons: [
          { id: 1, label: 'App 1', merged: false },
          { id: 2, label: 'App 2', merged: false },
          // ... 更多图标
        ],
        draggedIndex: null
      });
  
      const dragStart = (index) => {
        state.draggedIndex = index;
      };
  
      const dragDrop = (targetIndex) => {
        const sourceIcon = state.icons[state.draggedIndex];
        const targetIcon = state.icons[targetIndex];
  
        if (sourceIcon !== targetIcon) {
          // 合并图标逻辑，可以是创建一个新的文件夹图标或更新状态
          sourceIcon.merged = targetIcon.merged = true;
  
          // 例如，创建一个表示文件夹的新图标
          state.icons.push({
            id: Math.max(...state.icons.map(icon => icon.id)) + 1,
            label: `${sourceIcon.label} & ${targetIcon.label}`,
            merged: true
          });
        }
  
        state.draggedIndex = null;
      };
  
      const deleteIcon = (index) => {
        if (state.icons[index].merged) {
          // 解除合并或删除图标
          state.icons = state.icons.filter((_, i) => i !== index);
        }
      };
  
      return {
        ...toRefs(state),
        dragStart,
        dragDrop,
        deleteIcon
      };
    },
  };
  </script>
  
  <style scoped>
  .desktop {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    max-width: 600px;
    margin: auto;
  }
  
  .icon {
    width: 80px;
    height: 80px;
    margin: 8px;
    border: 1px solid #ccc;
    border-radius: 12px;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: grab;
  }
  
  .icon.merged {
    background-color: #add8e6;
  }
  </style>
  